<template>
	<view class="note_detail" v-if="detail">
		<!-- 导航  hd -->
		<view class="detali_hd">
			<uni-icons type="left" size="30" @tap="getPrev"></uni-icons>
			<!-- 用户信息 -->
			<view class="hd_user_info">
				<image class="img" :src="`${detail.author.p}`" mode=""></image>
				<view class="info_container">
					<view class="info_top">
						<view class="username">
							{{detail.author.n}}
						</view>
						<view class="LV">
							LV.{{detail.author.lvl}}
						</view>
					</view>
					<view class="info_bottom">
						{{detail.straight_text}}
					</view>
				</view>
			</view>
			<!-- gzhu -->
			<view class="follow">
				关注
			</view>
			<!-- 分享 -->
			<uni-icons type="more-filled" @tap="maskShare" size="30"></uni-icons>
		</view>
		<!-- 分享面板 -->
		<view class="mask" v-show="maskShow" @tap.stop="maskShare">
			<view class="mask_share" @tap.stop :class="maskState == false ? 'mask_out_active':'mask_in_active'">
				<!-- 图标 -->
				<view class="share_icon">
					<view class="share_contaiern">
						<view class="icon_bg">
							<uni-icons size="30" type="weixin" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							微信
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg">
							<uni-icons size="30" type="pyq" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							朋友圈
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_weibo">
							<uni-icons size="30" type="weibo" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							微博
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_qq">
							<uni-icons size="30" type="qq" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							QQ
						</view>
					</view>
				</view>

				<!--  -->
				<view class="share_icon">
					<view class="share_contaiern">
						<view class="icon_bg_two">
							<uni-icons size="30" type="image" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							分享海报
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_two">
							<uni-icons size="30" type="info" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							举报
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_two">
							<uni-icons size="30" type="link" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							复制链接
						</view>
					</view>
					<view class="share_contaiern ">
						<view class="icon_bg_two">
							<uni-icons size="30" type="star" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							收藏
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<compDetail :detail="detail"></compDetail>
		<!-- 评论区 -->
		<block v-if="detail.cs.length > 0">
			<compComment :comment = "detail.cs"></compComment>
		</block>
	</view>
</template>

<script>
	import compDetail from '../../../components/compDetail/compDetail.vue';
	import compComment from '../../../components/compComment/compComment.vue'
	export default {
		data() {
			return {
				detail: null,
				maskShow: false, //延时 隐藏  遮罩层
				maskState: false, //分享面板状态  
			};
		},
		components: {
			compDetail,
			compComment
		},
		onLoad(option) {
			console.log(option)
			this.getData(option.id)
		},
		methods: {
			getData(k) {
				this.$axios(`note/detail/${k}`).then(res => {
					console.log('菜谱详情---->', res.result.note);
					this.detail = res.result.note
				})
			},
			// 分享 遮罩层
			maskShare() {
				this.maskState = !this.maskState;
				setTimeout(() => {
					// 延时隐藏
					this.maskShow = !this.maskShow;
				}, 300)
				// console.log('分享--->', this.maskState)
			},
			maskTxt() {
				console.log('2')
			},
			getPrev(){
				this.$router.go(-1)
			}

		}
	}
</script>

<style lang="scss">
	.note_detail {
		width: 100%;
		position: relative;
		// z-index: 2;
	}

	.detali_hd {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: 130rpx;
		position: absolute;
		top: 0;
		background-color: #fff;

		// 用户信息
		.hd_user_info {
			width: 54%;
			display: flex;
			align-items: center;

			.img {
				
				width: 74rpx;
				height: 74rpx;
				border-radius: 50%;
			}
			.info_container{
				// width: 0%;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				.info_bottom {
					font-size: 18rpx;
				}
				
				.info_top {
					display: flex;
					.username {
						font-size: 18rpx;
						width: 100%;
						margin: 0 10rpx;
						font-weight: 600;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				
					.LV {
						font-size: 26rpx;
						color: #E2CB90;
						font-weight: 600;
					}
				}
			}

		

		}

		// 关注
		.follow {
			font-size: 28rpx;
			padding: 16rpx 50rpx;
			background-color: #FFC533;
			border-radius: 80rpx;
			font-weight: 600;
			color: #564A2C;
		}
	}

	// 分享面板
	// 
	.mask {
		width: 100vw;
		height: 100vh;
		position: absolute;
		background-color: rgba(0, 0, 0, .2);
		top: 0;
		z-index: 20;
	}

	.mask_share {
		width: 100%;
		height: 500rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		z-index: 99;

		// 图标
		.share_icon {
			margin: 30rpx 0;
			display: flex;
			justify-content: space-around;
			// background-color: #007AFF;
			width: 100%;
			height: 180rpx;

			.share_contaiern {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.icon_bg {
					padding: 20rpx;
					background-color: #48D026;
					border-radius: 50%;
				}

				.icon_bg_two {
					padding: 20rpx;
					border-radius: 50%;
					background-color: #F5F5F5;
				}

				.icon_bg_qq {
					padding: 20rpx;
					border-radius: 50%;
					background-color: #169BF8;
				}

				.icon_bg_weibo {
					padding: 20rpx;
					border-radius: 50%;
					background-color: #F66345;
				}

				.icon_txt {
					font-size: 28rpx;
					font-weight: bold;
					color: #707070;
				}
			}


		}

	}

	.mask_out_active {
		animation: mask_out .5s;
	}

	.mask_in_active {
		animation: mask_in .7s;
	}

	@keyframes mask_in {
		0% {
			bottom: -600rpx;
		}

		75% {
			bottom: 30rpx;
		}

		100% {
			bottom: 0rpx;
		}
	}

	@keyframes mask_out {
		0% {
			bottom: 0rpx;
		}

		100% {
			bottom: -600rpx;
		}
	}
</style>
